<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@page import="com.cap.bts.framework.usermgnt.constant.EmployeeStatus"%>    
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>套餐销售额查询</title>
<%@include file="../include/include.jsp"%>
<link rel="stylesheet" type="text/css" href="${csspath }/public.css"/>
<link rel="stylesheet" type="text/css" href="${csspath }/datepicker.css"/>
<link rel="stylesheet" type="text/css" href="${csspath }/style_l.css"/>
<script type="text/javascript" src="${jspath }/jquery-1.4.4.js"></script>
<script type="text/javascript" src="${jspath }/jquery.ui.min.js"></script>
<script type="text/javascript" src="${jspath }/ui.datepicker_zh-CN.js"></script>
<script type="text/javascript" src="${jspath }/jquery.blockUI.js"></script>
<script type="text/javascript" src="${jspath }/public.js"></script>
<script type="text/javascript" src="${jspath }/jquery.selectAll.js"></script>
<script type="text/javascript" src="${jspath}/jquery/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="${jspath}/jquery/jquery.alerts.js"></script>
<script type="text/javascript" src="${jspath}/load_layer.js"></script>
<link rel="stylesheet" type="text/css" href="${csspath}/jquery.alerts.css" />

<link rel="stylesheet" type="text/css"
	href="${webcontext}/css/validationEngine.jquery.css" />
<script src="${jspath}/jquery/validate/jquery.validationEngine.js"
	type="text/javascript"></script>
<script src="${jspath}/jquery/validate/jquery.validationEngine-zh.js"
	type="text/javascript"></script>
	<script type="text/javascript"
	src="${webcontext}/javascript/jquery/jquery.ui.draggable.js"></script>
<link rel="stylesheet" type="text/css"
	href="${bootstrapPath}/css/bootstrap.css" />
<script type="text/javascript" src="${bootstrapPath}/js/bootstrap.js"></script>
<style type="text/css">
html, body {
	overflow: auto;
}
.formError .formErrorContent {
    -moz-border-radius: 6px 6px 6px 6px;
    -moz-box-shadow: 0 0 6px #000000;
    background: none repeat scroll 0 0 #EE0101;
    border: 2px solid #DDDDDD;
    color: #FFFFFF;
    font-family: tahoma;
    font-size: 11px;
    padding: 4px 10px;
    width: 100px;
}
</style>

<script type="text/javascript">
var myHeight = 0;
$(function(){
	
	$("#search_form").validationEngine(
			{
             promptPosition:"topLeft",
             success:false,
             validationEventTriggers:"blur",
             scroll : false,
			 failure:function(){} 
	});
	var today = new Date();   
	var day = today.getDate();   
	var month = today.getMonth() + 1;   
	var year = today.getFullYear();
	var startYear;
	var startMonth;
	if((startYear == "" || startYear == undefined || startYear == null)
			&&(startMonth == "" || startMonth == undefined || startMonth == null)){ 
		if(month==1){
			startYear = String.valueOf(year-1);
			startMonth = String.valueOf(-12);
		}else{
			startYear = year;
			}
		}
});
function details(){
	$("#newUsedDiv").hide();
	$("#newExpireDiv").hide();
	$("#newPrePayDiv").hide();
	if($("#searchFlag").val()=="0"){
		$.ajax({
			type:'POST',
			url: '${webcontext}/crmdp/dealer/report/toQuerySalesDetails',
			data :  "packageId="+ $("#packageId").val()
				//	+ "&userId=" + $("#userId").val()
					+ "&hierarchy=" + $("#hierarchy").val(),
			//dataType : 'json',
			success : function(result) {
					$('#dataContainer').html(result);
					$("#dataContainer").show();
					$("#searchFlag").val("1");
		    },
			error:function(result){
				jAlert('查询失败，请重试', '提示'); 
			}
		});
	}else{
		$("#dataContainer").show();
	}
}
  
function search(){
	info_form.action="${webcontext}/crmdp/dealer/report/toQuerySalesReport";
	document.getElementById("info_form").submit();
}

function downloadDetails(type){
	info_form.action="${webcontext}/crmdp/dealer/report/toExportSalesReport?type="+type;
	document.getElementById("info_form").submit();
}

function chart(){
	info_form.action="${webcontext}/crmdp/dealer/report/backToSalesReportPage";
	document.getElementById("info_form").submit();
}

function showPrePay(){
	$("#newUsedDiv").hide();
	$("#newExpireDiv").hide();
	$("#dataContainer").hide();
	$("#newPrePayDiv").show();
}
function showUsed(){
	$("#newPrePayDiv").hide();
	$("#newExpireDiv").hide();
	$("#dataContainer").hide();
	$("#newUsedDiv").show();
}
function showExpire(){
	$("#newPrePayDiv").hide();
	$("#newUsedDiv").hide();
	$("#dataContainer").hide();
	$("#newExpireDiv").show();
}
function hideDiv(){
	$("#newPrePayDiv").hide();
	$("#newUsedDiv").hide();
	$("#dataContainer").hide();
	$("#newExpireDiv").hide();
}

</script> 
</head>
<body>
	<!-- content -->
	<div>
		<div id="wrap" style="width:75%;">
		    <div class="spliter h_10"></div>
			<!-- info_div -->
	<form:form class="form-horizontal" id="info_form" method="post" modelAttribute="dto">
				<input type="hidden" name="searchFlag" id="searchFlag" value="0">
			<div class="row" style="margin-left: auto;margin-right: auto;">
				<%-- <div class="form-group" style="text-align: center;">
					<label class="col-sm-2 control-label" for="transactionStartDate">起始日期</label>
					<div class="col-sm-3">
						<input name="transactionStartDate" class="form-control input-sm validate[length[0,100]] date" id="startDate" type="text"
							 value="${dto.transactionStartDate}" />
					</div>
					<label for="transactionEndDate" class="col-sm-2 control-label">结束日期</label>
					<div class="col-sm-3">
					 	<input  name="transactionEndDate" class="form-control input-sm validate[length[0,100]] date" id="endDate" type="text" 
						 value="${dto.transactionEndDate}" />
					</div>
				</div> --%>
				<div class="form-group" style="text-align: center;">
					<label class="col-sm-2 control-label" for="packageId">套餐名称</label>
					<div class="col-sm-3">
				       	<form:select path="packageId" cssClass="form-control" id="packageId" style="width:200px">
				       	<form:option value="all">全部</form:option>
						    <core:forEach items="${packages}" var="packages">
					           <form:option value="${packages.id}">${packages.packageName}
					           </form:option>
      						</core:forEach>
						</form:select>
					</div>
				    <core:if test="${sessionScope.FROM_MARS_FLAG}">
					<label for="hierarchy" class="col-sm-2 control-label">查看门店</label>
					<div class="col-sm-3">
				       	<form:select path="hierarchy" cssClass="form-control" id="hierarchy" style="width:150px">
				       	<form:option value="1">所有门店</form:option>
						    <core:forEach items="${dealerList}" var="dealerList">
					           <form:option value="${dealerList}">${dealerList}</form:option>
      						</core:forEach>
						</form:select>
					</div>
                    </core:if>
				</div>
			</div>
			<div style="text-align: center; margin-top: 10px;">
				<button type="button" class="btn btn-success" value="查询" onclick="search()">
							<i class="glyphicon glyphicon-search" style="color:#FFFFFF"></i>&nbsp;查询
						</button>
				<button type="reset" class="btn btn-success" value="重置">
							<i class="glyphicon glyphicon-trash" style="color:#FFFFFF"></i>&nbsp;重置
						</button>
				<!-- <button type="button" class="btn" value="图表 " onclick="chart()">
						<i class="glyphicon glyphicon-stats" style="color:#FFFFFF"></i>&nbsp;图表</button> -->
			</div>
			<!-- /search_div -->
			<div class="spliter h_10"></div>
			<!-- data_div -->
			<div id="dataTable" class="data_div">
			<table id="table" class="table" border="1">
				<tr>
					<th colspan="5" style="text-align: center;">预付费</th>
					<th style="text-align: center;">非预付费</th>
				</tr>
				<tr>	
					<th>预付费</th>
					<th>使用</th>
					<th>未使用</th>
					<th>过期</th>
					<th>收入</th>
					<th>收入</th>	
					<!-- <th width="10%">新增预收款金额</th>
					<th width="10%">累计预收款金额</th>
					<th width="10%">已使用预收款金额</th>
					<th width="10%">累计已使用预收款金额</th>
					<th width="10%">过期残值</th>
					<th width="10%">累计过期残值</th>
					<th width="10%">门店收入</th>
					<th width="10%">门店累计收入</th>
					<th width="10%">累计未使用金额</th> -->
				</tr>
					<tr>
						<td><a href="#" onclick="downloadDetails(1)">${resultList.prePay}</a></td>
						<td><a href="#" onclick="downloadDetails(2)">${resultList.usedPrePay}</a></td>
						<td><a href="#" onclick="downloadDetails(3)">${resultList.notUsedPrePay}</a></td>
						<td><a href="#" onclick="downloadDetails(4)">${resultList.expiredPrePay}</a></td>
						<td><a href="#" onclick="downloadDetails(5)">${resultList.incomePrePay}</a></td>
						<td><a href="#" onclick="downloadDetails(6)">${resultList.incomeNotPrePay}</a></td>
						<%-- <td class="text-right">
                        	<a href="#" onclick="showPrePay()">${resultList.salesPrePay}</a>
                        	</td>
                        <td class="text-right">${resultList.allPrePay}</td>
                        <td class="text-right">
                        	<a href="#" onclick="showUsed()">${resultList.usedValue}</a>
                        	</td>
                        <td class="text-right">${resultList.allUsedValue}</td>
                        <td class="text-right">
                        	<a href="#" onclick="showExpire()">${resultList.salvageValue}</a>
                        	</td>
                        <td class="text-right">${resultList.allSalvageValue}</td>
                        <td class="text-right">${resultList.actualSalesVolume}</td>
                        <td class="text-right">${resultList.allSalesVolume}</td>
                        <td class="text-right">
                        <a href="javascript:details();">
                        ${resultList.allNotUsedValue}
                        </a></td> --%>
                    </tr>
			</table>
			<%-- <div id="newPrePayDiv" style="display: none">
			<table id="newPrePayTable" class="table" border="1"  style="border-color: #e8e8e8;">
				<tr onclick="hideDiv()">			
					<th width="10%">姓名</th>
					<th width="10%">手机</th>
					<th width="10%">车牌</th>
					<th width="10%">套餐名称</th>
					<th width="10%">卡片号码</th>
					<th width="10%">预付金额</th>
					<th width="10%">购买日期</th>
				</tr>
            	<core:forEach items="${newPrePay}" var="newPrePay">
					<tr>
                        <td class=text-left>${newPrePay.name}</td>
                        <td class="text-left">${newPrePay.telephone}</td>
                        <td class="text-left">${newPrePay.carPlate}</td>
                        <td class="text-left">${newPrePay.packageName}</td>
                        <td class="text-left">${newPrePay.packageNo}</td>
                        <td class="text-left">${newPrePay.balance}</td>
                        <td class="text-left">${newPrePay.transactionDate}</td>
                    </tr>
                 </core:forEach>
			</table>
			</div>
			<div id="newUsedDiv" style="display: none">
			<table id="newUsedTable" class="table" border="1"  style="border-color: #e8e8e8;">
				<tr onclick="hideDiv()">			
					<th width="10%">姓名</th>
					<th width="10%">手机</th>
					<th width="10%">车牌</th>
					<th width="10%">套餐名称</th>
					<th width="10%">卡片号码</th>
					<th width="10%">已使用金额</th>
					<th width="10%">使用日期</th>
				</tr>
            	<core:forEach items="${newUsed}" var="newUsed">
					<tr>
                        <td class=text-left>${newUsed.name}</td>
                        <td class="text-left">${newUsed.telephone}</td>
                        <td class="text-left">${newUsed.carPlate}</td>
                        <td class="text-left">${newUsed.packageName}</td>
                        <td class="text-left">${newUsed.packageNo}</td>
                        <td class="text-left">${newUsed.balance}</td>
                        <td class="text-left">${newUsed.transactionDate}</td>
                    </tr>
                 </core:forEach>
			</table>
			</div>
			<div id="newExpireDiv" style="display: none">
			<table id="newExpireTable" class="table" border="1"  style="border-color: #e8e8e8;">
				<tr onclick="hideDiv()">			
					<th width="10%">姓名</th>
					<th width="10%">手机</th>
					<th width="10%">车牌</th>
					<th width="10%">套餐名称</th>
					<th width="10%">卡片号码</th>
					<th width="10%">残值</th>
					<th width="10%">失效日期</th>
				</tr>
            	<core:forEach items="${newExpire}" var="newExpire">
					<tr>
                        <td class=text-left>${newExpire.name}</td>
                        <td class="text-left">${newExpire.telephone}</td>
                        <td class="text-left">${newExpire.carPlate}</td>
                        <td class="text-left">${newExpire.packageName}</td>
                        <td class="text-left">${newExpire.packageNo}</td>
                        <td class="text-left">${newExpire.balance}</td>
                        <td class="text-left">${newExpire.transactionDate}</td>
                    </tr>
                 </core:forEach>
			</table>
			</div>
			<div id="dataContainer" style="display: none">
		</div> --%>
		
		</div>
			<!-- /data_div -->
	</form:form>
		</div>
		<!-- /wrap -->
		</div>
	<!-- /content -->
  </body>
</html>